<!--  -->
<template>
    <div style="padding-bottom: 42px">

        <van-form @submit="onSubmit" @failed="failedMethod">

            <!-- 头部 -->
            <div class="font15 mt10">
                <div class="pl10">
                    <span class="titletext ">{{ params.isDrawup == '1' ? '5G项目起草' : nFromdata.title }}</span>
                </div>

                <div v-if="params.isDrawup != '1'" class="graytext mt10 mb5 font13 pl10">
                    <span>工单编号:</span>
                    <span class="titletext">{{ nFromdata.pmInsId }}</span>
                </div>

                <div v-if="params.isDrawup == '1'" class="redtext mt10 mb5 font13 pl10">
                    <span>提示:该表单带*字段都为必填项</span>
                </div>

                <div class="bcolor-e" style="height: 2px;"></div>
            </div>

            <section-header sectionTitle="基础信息"></section-header>
            <van-cell-group>

                <van-field readonly required name="projectEstablishNumberNew"
                    :value="mFromdata.projectEstablishNumberNew" label="全网项目编码:" label-width="7em" />
                <van-field readonly required name="pdTruename" :value="mFromdata.pdTruename" label="项目经理:"
                    label-width="5em" />
                <van-field readonly required name="projectEstablishName" :value="mFromdata.projectEstablishName"
                    label="项目名称:" label-width="5em" />
                <van-field readonly required name="city" :value="mFromdata.city" label="地市:" label-width="3em" />
                <van-field readonly required name="counties" :value="mFromdata.counties" label="县区:"
                    label-width="3em" />
                <van-field readonly required name="customerCode" :value="mFromdata.customerCode" label="客户编码:"
                    label-width="5em" />
                <van-field readonly required name="customerName" :value="mFromdata.customerName" label="客户名称:"
                    label-width="5em" />
                <van-field readonly required name="regionId" :value="mFromdata.regionId" label="客户级别:"
                    label-width="5em" />
                <van-field readonly required name="ict5gAmount" :value="mFromdata.ict5gAmount" label="5G专网计划出账金额(含税,元):" label-width="15em" />
                <van-field readonly required name="receAmount" :value="mFromdata.receAmount" label="5G专网已出账金额(含税,元):" label-width="14em" />
                <van-field readonly required autosize type="textarea" rows="1" name="buildContent"
                    :value="mFromdata.buildContent" label="项目简介:" label-width="5em" />
            </van-cell-group>
            <section-header sectionTitle="项目合同信息"></section-header>
            <van-field readonly required name="incomeContractAmountNew" :value="mFromdata.incomeContractAmountNew" label="收入合同签约时间:" label-width="9em" />
            <van-field readonly autosize type="textarea" rows="1" required name="signedDateNew" :value="mFromdata.signedDateNew" label="收入合同金额:" label-width="7em"/>
            <el-table :data="mFromdata.contractMap" border style="width: 100%">
              <el-table-column prop="contractIncExpType" label="收支合同类型" />
              <el-table-column prop="contractNo" label="合同编号" width="110"/>
              <el-table-column prop="contractName" label="合同名称" width="150"/>
              <el-table-column prop="contractSignedDate" label="合同签约时间" width="100"/>
              <el-table-column prop="contractTerm" label="合同年限" />
              <el-table-column prop="contractAmountLowercase" label="合同总金额(不含税,元)" width="100"/>
              <el-table-column prop="amountTax" label="合同总金额(含税,元)" width="100"/>
              <el-table-column prop="billingTime" label="收入合同扫描件" width="130">
                <template slot-scope="scope">
                  <div v-if="scope.row.contractList" v-for="(fileitem) in scope.row.contractList" :key="fileitem.id"
                       style="margin-left:20px">
                    <div readonly class="font14 fileLink" style="color:#0F85CF">
                      <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName
                        }}</a>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <section-header sectionTitle="5G项目信息"></section-header>
            <van-cell-group>
                <van-field readonly required name="is5GProject" :value="mFromdata.is5GProject? '是' : '否'"
                    label="是否为5G项目:" label-width="7.5em" />
                <van-field v-if="showReason" readonly required autosize type="textarea" rows="1" name="cancelReason"
                         :value="mFromdata.cancelReason" label="撤销认定原因:" label-width="7em" />
                <van-cell-group v-if="mFromdata.is5GProject">
                    <van-field readonly required name="industrySegmentation5g" :value="mFromdata.industrySegmentation5g"
                        label="5G细分行业:" label-width="6.5em" />
                    <van-field v-if="mFromdata.industrySegmentation5g == '其他'" readonly required name="industryName"
                        :value="mFromdata.industryName" label="行业名称:" label-width="5em" />
                    <van-field readonly required name="miityangFanPlan" :value="mFromdata.miityangFanPlan"
                        label="工信部扬帆计划:" label-width="8em" />
                    <van-field readonly required name="isSmartPark" :value="mFromdata.isSmartPark ? '是' : '否'"
                        label="是否智慧园区:" label-width="7em" />
                    <van-field readonly required name="is5GNetwork" :value="mFromdata.is5GNetwork ? '是' : '否'"
                        label="是否使用5G专网:" label-width="9em" />

                    <van-cell-group v-if="mFromdata.is5GNetwork">
                        <van-field readonly required name="dedicatedNetworkMode" :value="mFromdata.dedicatedNetworkMode"
                            label="专网模式:" label-width="5em" />
                        <van-field readonly required name="valueAddedFunction" :value="mFromdata.valueAddedFunction"
                            label="增值功能:" label-width="5em" />
                        <van-field readonly required name="specialNetworkType" :value="mFromdata.specialNetworkType"
                                 label="专网类型:" label-width="5em" />
                        <van-field readonly required name="numberOfServiceUsers" :value="mFromdata.numberOfServiceUsers"
                            label="服务用户数(个):" label-width="8em" />
                        <van-field v-if="mFromdata.dedicatedNetworkMode==='尊享：B3专网专用'" readonly required name="dedicated700mMacroNumber" :value="mFromdata.dedicated700mMacroNumber"
                                   label="专用700M宏站数量:" label-width="9em" />
                        <van-field v-if="mFromdata.dedicatedNetworkMode==='尊享：B3专网专用'" readonly required name="dedicated700mRoomNumber" :value="mFromdata.dedicated700mRoomNumber"
                                   label="专用700M室分数量:" label-width="9em" />
                        <van-field v-if="mFromdata.dedicatedNetworkMode==='尊享：B3专网专用'" readonly required name="dedicated26gMacroNumber" :value="mFromdata.dedicated26gMacroNumber"
                                   label="专用2.6G宏站数量:" label-width="9em" />
                        <van-field v-if="mFromdata.dedicatedNetworkMode==='尊享：B3专网专用'" readonly required name="dedicated26gRoomNumber" :value="mFromdata.dedicated26gRoomNumber"
                                   label="专用2.6G室分数量:" label-width="9em" />
                        <van-field v-if="mFromdata.dedicatedNetworkMode==='尊享：B3专网专用'" readonly required name="dedicated49gMacroNumber" :value="mFromdata.dedicated49gMacroNumber"
                                   label="专用4.9G宏站数量:" label-width="9em" />
                        <van-field v-if="mFromdata.dedicatedNetworkMode==='尊享：B3专网专用'" readonly required name="dedicated49gRoomNumber" :value="mFromdata.dedicated49gRoomNumber"
                                 label="专用4.9G室分数量:" label-width="9em" />
                        <van-field readonly required name="signedAmount5gprivateNetwork"
                            :value="mFromdata.signedAmount5gprivateNetwork" label="5G专网签约金额(元):" label-width="10em" />
                    </van-cell-group>
                </van-cell-group>
                <van-field readonly required autosize type="textarea" rows="1" name="keyPageOfContract"
                    :value="mFromdata.keyPageOfContract" label="合同关键页:" label-width="6em" />
            </van-cell-group>
            <div>
                <van-field label-width="5em" readonly label="证明材料:" required/>
                <div v-for="(fileitem) in mFromdata.documentDescriptionList" :key="fileitem.id"
                    style="margin-left:20px">
                    <div readonly class="font14 fileLink" style="color:#0F85CF">
                        <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName
                            }}</a>
                    </div>
                </div>
                <van-field label-width="9em" readonly label="网络建设方案文件:" />
                <div v-for="(fileitem) in mFromdata.networkSchemeFile" :key="fileitem.id" style="margin-left:20px">
                    <div readonly class="font14 fileLink" style="color:#0F85CF">
                        <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName
                            }}</a>
                    </div>
                </div>
            </div>
            <!-- 跳转意见 -->
            <div v-if="showOpinionMoudle" class="left_botton">
                <button block type="button" @click="tomsg()" style="color:#60a9ec; display: inline-block;width:100%;border: 0px solid #60a9ec;border-radius: 15px 0px 0px 15px;
            padding:10px 10px 10px 15px;font-size:13px">意见</button>
            </div>

            <!-- 流转下一步 -->
            <div v-if="showNextButton" class="footer">
              <van-button block type="info" native-type="submit" :disabled="canToNext==true?false:true"
                          style="display: inline-block;width:100%;border: 15px solid #60a9ec;">{{toNextValue}}</van-button>
            </div>
        </van-form>




        <!-- 当前办理人 -->
        <section-header v-if="showHistoryMoudle" sectionTitle="当前办理人"></section-header>
        <div v-if="showHistoryMoudle" class="font13 ptandpb10 pl16">
            <div>
                <span class="titletext font13">{{
                    historydata.MANAGER
                    }}</span>
            </div>
            <div class="mt5">
                <span class="graytext font12">{{ historydata.DEPARTMENT }}</span>
            </div>
        </div>


        <!-- 审批意见 -->
        <section-header v-if="showOpinionMoudle" id="opinion" sectionTitle="审批意见"></section-header>
        <opinion-item v-if="showOpinionMoudle" :approveList="approveList"></opinion-item>

    </div>
</template>


<script>

import { mapGetters } from "vuex";
import { Dialog, Notify, Toast } from "vant";

import { openFileUrl } from "@/store/openFile";
import util from "@/assets/js/public";

import {
    getDictList,

    getFormDetail,
    getWfOptMags,
    getWfLinkTracks,
    getFormByPmInsId,

} from "@/api/dictapi";

import SectionHeader from '../sztdzj/sztdzjDetail/section-header.vue';
import OpinionItem from '../sztdzj/sztdzjDetail/opinion-item.vue';

export default {
    data() {
        return {
            params: this.$route.query,
            todotype: false,
            toRead: false,
            approveList: [],
            historydata: {},
            nFromdata: {},
            mFromdata: {
                pmoTeamList: [],
            },
            industryPullBasisShowPopupView: false,
            industryPullBasisPopupColumns: [],
            isPmoShowPopupView: false,
            isPmoPopupColumns: [{ value: '是', label: '是' }, { value: '否', label: '否' }],
            select_xm_showPopupView: false,
            pmo_page_showPopupView: false,
            pmo_page_data: {},
            pmo_page_index: 0,
          toNextValue:'流转下一步',
          canToNext:true
        };
    },

    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),
        /// 意见
        showOpinionMoudle() {
            return this.params.isDrawup != '1';
        },
        showHistoryMoudle() {
            return this.params.todoType == "2" && (this.historydata && Object.keys(this.historydata).length > 0 && this.historydata.MANAGER) && this.params.isDrawup != '1';
        },
        showNextButton() {
            return this.todotype || this.toRead || this.params.isDrawup == '1';
        },
        showReason() {
          return this.params.pmInsType=='FGC' || this.params.pmInsType=='FGCC';
        }
    },
    //生命周期--挂载完成
    components: {
        SectionHeader,
        OpinionItem,
    },
    //生命周期--创建完成
    created() {
    },
    //生命周期--挂载完成
    mounted() {
    },
    //生命周期--创建完成
    activated() {
      console.log("传给递交页面:", this.params.processInstId)
      if(this.params.pmInsType==null&&this.params.processType!=null) {
        this.params.pmInsType = this.params.processType
      }
      if (this.params.todoType % 2 == 0) {
        this.showHistory = true;
      }
      if(this.params.todoType=='1'){
        this.todotype=true;
        if(this.params.location=='dict.start'||this.params.location=='dict.adjustmentAdminStart'){
          this.canToNext=false
          this.toNextValue='暂不支持该环节,请至PC端办理'
        }else {
          this.canToNext=true
          this.toNextValue='流转下一步'
        }
      }else if(this.params.todoType=='3'){
        this.toread=true;
      }
      this.requestFlowDetail();
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            // console.log('AA', to, 'AAAA', from);
            // 起草 - 从二级商机列表进来（界面因为保活问题，第二次从商机列表进来的时候 created方法不会重新调用，所以需要确保商机列表进来（或唤醒）时，要刷新起草数据）
            // 通过 `vm` 访问组件实例
            if (to.query.isDrawup == '1' && from.name === 'drawup_transition_tab') {
                vm.params = to.query;
                vm.requestDrawupInfo(to.query.projectId);
            }
        });
    },
    //方法调用
    methods: {
        failedMethod(data) {
            console.log('submit fail:', data);
            const errorArr = data.errors;
            const errorObj = errorArr[0];
            const errorMessage = errorObj.message;
            Toast({ type: 'text', message: errorMessage, duration: 1000 });
        },
        tomsg() {
            document.getElementById('opinion').scrollIntoView({ behavior: 'smooth' })
        },
        openFileUrlfun(value) {
            this.$router.push({
                name: "fileview",
                query: {
                    openFileUrl: openFileUrl(value),
                },
            });
        },
        /// 项目流转 的请求
        requestFlowDetail() {
            Toast.loading({ message: "加载中", forbidClick: false });
            getFormDetail(Object.assign(this.params, {
                userName: this.user.userName,
            })).then((result) => {
                Toast.clear();
                if (!result.data) {
                    Notify(result.message);
                    return;
                }
                if (result.data.data) {
                    this.nFromdata = result.data.data;
                }
                this.getFormByPmInsId();
            })
            getWfOptMags(Object.assign(this.params, {
                userName: this.user.userName,
            })).then((result) => {
                Toast.clear();
                if (!result.data) {
                    Notify(result.message);
                    return;
                }
                this.approveList = result.data.data.reverse();
            })
            if (this.params.todoType == "2") {
                getWfLinkTracks(Object.assign(this.params, {
                    userName: this.user.userName,
                })).then((result) => {
                    Toast.clear();
                    if (!result.data) {
                        Notify(result.message);
                        return;
                    }
                    if (result.data.data) {
                        //数据过滤，并生成新的数组
                        this.historydata = result.data.data.filter(
                            (item) => item.CURRENTSTATE == 10
                        )[0];
                    }
                })
            }
        },
        getFormByPmInsId() {
            getFormByPmInsId(this.params.pmInsId).then((result) => {
                Toast.clear();
                if (!result.data) {
                    Notify(result.message);
                    return;
                }
                if (result.data.data) {
                    this.mFromdata = result.data.data;
                }
            });
        },
        onSubmit() {
            // if (this.mFromdata.isPmo == '是' && (this.mFromdata.pmoTeamList == null || this.mFromdata.pmoTeamList == undefined || this.mFromdata.pmoTeamList.length == 0)) {
            //
            //     Dialog.alert({
            //         title: '提示',
            //         message: 'PMO成员不可为空，请添加人员！',
            //     });
            //     return
            // }
            // this.controlRule(this.params, this.mFromdata.businessId, this.onNext);
          this.onNext();
        },
        // 流转下一步
        onNext() {
            var formSendData = { "htmlParamMap": {} };
            formSendData.htmlParamMap = this.mFromdata;
            formSendData.id = this.nFromdata.id;
            formSendData.pmInsId = this.nFromdata.pmInsId;
            formSendData.processType = this.params.pmInsType
            formSendData.workItemId = this.params.workItemId;
            let currentUserCode = util.encrypt(this.user.userName);
            var params1 = {
                kv: {
                    currentUserCode: currentUserCode,
                    source: 'MOBILE',
                    location: this.params.location,
                    processInstId: this.params.processInstId,
                    processDefName: this.params.processDefName,
                    processType: this.params.pmInsType,
                },
            };
            var params2 = {
                kv: {
                    "currentUserCode": currentUserCode,
                    "source": 'MOBILE',
                    "location": this.params.location,
                    "processInstId": this.params.processInstId,
                    'processType': this.params.pmInsType,
                    'receiptCode': this.params.processInstId
                },
            };
            var params3 = {
                kv: {
                    "source": 'MOBILE',
                    "currentUserCode": currentUserCode,
                    "workItemId": this.params.todoType == 3 ? "" : this.params.workItemId,
                    "processInstId": this.params.processInstId,
                    "location": this.params.location,
                    "notificationId": this.params.todoType == 3 ? this.params.wfnid : ""
                },
            };
            console.log('AAAAAAA', this.user.userName, params1);
            localStorage.setItem('submitPageParam', JSON.stringify({
                getDecisionsUrl: 'decisionAndUser$api$getDecisions',
                getUserUrl: 'decisionAndUser$api$getOrgAndUser',
                tosubmintUrl: 'applicationFormEnhance$api$startSubmitProcess',
                getDecisionsParams: params1,
                getUserParams: params2,
                tosubmintParams: params3,
                formData: formSendData,
                fromMoa: this.params.fromMoa,
                type: this.params.todoType == 3 ? "toRead" : "toDo"
            }));
            this.$router.push({
                name: "srqrsubmit"
            });
        },
    },
};
</script>

<style scoped>
/* @import url();*/
</style>